/*
Copyright (C) 2014 Intelligent Artefacts Ltd - All rights reserved
This source file is part of the Kythera AI Middleware
Use, modification and distribution of this file or any portion thereof
is only permitted as specified in your Kythera License Agreement. 
*/

#messagebox {
  margin-top: 15px;
}

.tab-pane {
  padding-top: 15px;
}

#frame-slider-container {
  margin-left: 1em;
  margin-right: 0em;
  width: 300px;
}

.frame-indicator {
    -moz-user-select: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 0px 6px 6px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.frame-indicator .frame {
    color: #777;
}

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.glyphicon-none:before {
    content: "\e013";
    color: transparent !important;
}

#recording-start-tooltip {
    display: inline-block;
}

/* Red pulsing animation */

@-webkit-keyframes pulse-red-anim {
  from { background-color: #d9534f; -webkit-box-shadow: 0 0 9px #d9534f; }
  50% { background-color: #FF933B; -webkit-box-shadow: 0 0 18px #FF933B; }
  to { background-color: #d9534f; -webkit-box-shadow: 0 0 9px #d9534f; }
}

@-moz-keyframes pulse-red-anim {
  from { background-color: #d9534f; -webkit-box-shadow: 0 0 9px #d9534f; }
  50% { background-color: #FF933B; -webkit-box-shadow: 0 0 18px #FF933B; }
  to { background-color: #d9534f; -webkit-box-shadow: 0 0 9px #d9534f; }
}

@keyframes pulse-red-anim {
  from { background-color: #d9534f; -webkit-box-shadow: 0 0 9px #d9534f; }
  50% { background-color: #FF933B; -webkit-box-shadow: 0 0 18px #FF933B; }
  to { background-color: #d9534f; -webkit-box-shadow: 0 0 9px #d9534f; }
}

.pulsing-red {
  -webkit-animation-name: pulse-red-anim;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: pulse-red-anim;
  -moz-animation-duration: 1.5s;
  -moz-animation-iteration-count: infinite;

  animation-name: pulse-red-anim;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

/* Green pulsing animation */

@-webkit-keyframes pulse-green-anim {
  from { background-color: #5cb85c; -webkit-box-shadow: 0 0 9px #4cae4c; }
  50% { background-color: #C9FFC9; -webkit-box-shadow: 0 0 18px #D6FFD6; }
  to { background-color: #5cb85c; -webkit-box-shadow: 0 0 9px #4cae4c; }
}

@-moz-keyframes pulse-green-anim {
  from { background-color: #5cb85c; -webkit-box-shadow: 0 0 9px #4cae4c; }
  50% { background-color: #C9FFC9; -webkit-box-shadow: 0 0 18px #D6FFD6; }
  to { background-color: #5cb85c; -webkit-box-shadow: 0 0 9px #4cae4c; }
}

@keyframes pulse-green-anim {
  from { background-color: #5cb85c; -webkit-box-shadow: 0 0 9px #4cae4c; }
  50% { background-color: #C9FFC9; -webkit-box-shadow: 0 0 18px #D6FFD6; }
  to { background-color: #5cb85c; -webkit-box-shadow: 0 0 9px #4cae4c; }
}

.pulsing-green {
  -webkit-animation-name: pulse-green-anim;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: pulse-green-anim;
  -moz-animation-duration: 1.5s;
  -moz-animation-iteration-count: infinite;

  animation-name: pulse-green-anim;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

/* To make the first span inside a button toolbar have the right margin.
   Otherwise it will stick out to the left. */

.btn-toolbar > span:first-child {
  margin-left: 5px;
}

/* Recording tab selector */

#recordings .not-empty form {
  margin-left: 5px;
  margin-top: -5px;
  margin-bottom: 10px;]
}

#recordings .not-empty form .checkbox {
  padding-left: 10px;
  padding-right: 10px;
}

/* This overrides a style in jsoneditor.css and becomes obsolete once we take that out. */
#recording-blackboards > .json-editor {
  padding: 0;
}

/* Info tab configuration table */

.config-area .property-name {
  vertical-align: top;
  display: inline-block;
  width: 230px;
}

.config-area .property-value {
  vertical-align: top;
  display: inline-block;
  width: 150px;
}

.config-area .property-desc {
  vertical-align: top;
  display: inline-block;
}

/* Pulsing animation */

@-webkit-keyframes color-pulse-anim {
  from { color: #5cb85c; }
  50% { color: #C9FFC9; }
  to { color: #5cb85c; }
}

@-moz-keyframes color-pulse-anim {
  from { color: #5cb85c; }
  50% { color: #C9FFC9; }
  to { color: #5cb85c; }
}

@keyframes color-pulse-anim {
  from { color: #5cb85c; }
  50% { color: #C9FFC9; }
  to { color: #5cb85c; }
}

.color-pulsing {
  -webkit-animation-name: color-pulse-anim;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;

  -moz-animation-name: color-pulse-anim;
  -moz-animation-duration: 1.5s;
  -moz-animation-iteration-count: infinite;

  animation-name: color-pulse-anim;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

/* Manage tab recordings list */

#recording-list {
  padding-left: 0;
  max-height: 272px;
  overflow-y: scroll;
}

#recording-list li {
  list-style-type: None;
}

#recording-list li:nth-child(odd) {
  background-color: #eef;
}

#recording-list li:hover {
  background-color: #cfc;
}

#recording-list-header {
  padding-top: 3px;
  background-color: #ddd;
}

#recording-list-header span,
#recording-list span {
  display: inline-block;
}

#recording-list span {
  font-weight: 500;
}

#recording-list-header input[type=checkbox],
#recording-list input[type=checkbox] {
  width: 32px;
}

#recording-list-header .name,
#recording-list .name {
  width: 200px;
}

#recording-list-header .unnamed,
#recording-list .unnamed {
  color: #999;
  font-style: italic;
}

#recording-list-header .date,
#recording-list .date {
  width: 220px;
}

#recording-list-header .machine-name,
#recording-list .machine-name
 {
  width: 150px;
}
